<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script src="/spring-merchant/js/bootstrap/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap-theme.min.css">
    <script src="/spring-merchant/js/bootstrap/bootstrap.min.js"></script>
	
	<script src="/spring-merchant/js/dist/sweetalert-dev.js"></script>
    <link href="/spring-merchant/css/dist/sweetalert.css" rel="stylesheet">
    <script src="/spring-merchant/js/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="/spring-merchant/js/websocket.js"></script>
 <style>
        body{
            
        }
        .top-title{
            height: 100px;
            width: 100%;
        }
        .log-div{
            width: 15.7%;
            float: left;
        }
        .title-nav{
            position:relative;
            float: left;
            height: 100px;
            width: 84.3%;
           /* background-color: coral;*/
        }
        .page-header-div{
            float: left;
            text-align: center;
            width: 80%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: darkgray;*/
        }
        .admin-center{
            float: left;
            text-align: center;
            width: 20%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: aqua;*/
        }
        .user-center-btn-group button:nth-child(2) span:nth-child(1) {
        	margin-top:100%;
            text-align: center;
       		vertical-align: middle;
            padding: 4.5px 0px;
            line-height: 40px;
        }
        .user-center-btn-group{
            margin-left: 10%;
        }
        .menu-div{
            float: left;
            width: 15.7%;
        }
        .menu-blank-block{
            width: 300px;
            height: 150px;
        }
        .menu-li{
            padding: 20px 0px;
        }
        .operationarea{
            float: left;
            width: 84.3%;
            height: 873px;
            border: 1px solid gray;
        }
        #food-type-choose-nav ul{
            margin-top: 20px;
            margin-left: 13%;
        }
        #food-type-choose-nav ul li{
            width: 15%;
            height: 70px;
            text-align: center;
        }
        #addfood-form-div{
            margin-top: 7%;
            margin-left: 20%;
            width: 50%;
        }

    </style>
</head>
<body>
   <div id="main-div">
   <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="/spring-merchant/image/login.jpg" alt="merchant">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>Add food <small></small></h1>
            </div>
          <%@include file="../../user_nav.jsp"%>
        </div>
    </div>
       <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
    <!--隔离空白区美观-->
           
    <!--选项栏-->
            <div class="console-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li crole="presentation" class="menu-li"><a href="/spring-merchant/views/orders">Order Management</a></li>
                    <li role="presentation" class="active menu-li"><a href="/spring-merchant/views/foods">Food Management</a></li>
                    <li role="presentation" class="menu-li"><a href="/spring-merchant/views/comments">Comment Management</a></li>
                    <li role="presentation" class="menu-li"><a href="/spring-merchant/views/advertisement">Advertisement Management</a></li>
                </ul>
            </div>
        </div>
        <div class="operationarea">
            <div id="food-type-choose-nav">
                <ul id="category-list" class="nav nav-pills">
                  
                </ul>  
            </div>
            <div id="addfood-form-div">
            
            <form  action="${pageContext.request.contextPath}/foods" method="post" enctype="multipart/form-data">
				<div class="form-group">
                    <label for="exampleInputEmail1">Food Name</label>
                    <input type="text" class="form-control" name="name" placeholder="Food Name">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Food Price</label>
                    <input type="number" class="form-control" name="price" placeholder="Food Price">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Food Pype</label>
                    <select class="form-control" name="categoryId" id="categories">
                       
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="foodimg" name="foodImage">
                    <p class="help-block">Choose nice pictures to increase your food appetite</p>
                    </div>
                    <div class="checkbox">
                    <label>
                    <input type="hidden">
                    </label>
                </div>
                    <button id="addFoodBtn" type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        </div>
        </div>
    </div>
 <script type="text/javascript">
    (function(){
	var obj={};
	//用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
	obj.ajax = function(type, url, data, headers, context, callback){
		$.ajax({
			type: type,
			url: url,
			data: JSON.stringify(data),
			headers: headers,
			context:context
		}).done(callback);
	};
	   window.ajaxRequest = obj;
    })();
    
    function MerchantFoodManager(templateOfCategories){
    	  var self = this;
	      this.modelOfCategories = null;
	      this.templateOfCategories = templateOfCategories;
            /*获取菜品种类*/
	      this.findAllCategories = function(){
		     ajaxRequest.ajax("GET","/spring-merchant/categories",null,null,this,function(categories){
			        this.modelOfCategories = categories;
			       /*  _render_Categories(this.modelOfCategories); */
			        _render_Categories_Select(this.modelOfCategories);
		     });
	      };
        
	      function _render_Categories(data){
		     templateOfCategories.empty();
             $("#category-list").append($("<li value='all' id='category-type-per' role='presentation'></li>").append($("<a href='MerchantFoodManager.html'></a>").text("All")));
		     data.forEach(function(item){
		    	 $("#category-list").append($("<li value='"+item.id+"' id='category-type-per' role='presentation'></li>").append($("<a href='MerchantFoodManager.html'></a>").text(item.type)));
		     });
              /*添加增加食物按钮，跳转到增加食物的界面，需要修改href*/
              $("#category-list").append($("<li role='presentation' class='active'><a href='javascript:void(0);'>Add Food</a></li>"));
	      }
	      
	      function _render_Categories_Select(data){
			     $("#categories").empty();
			     data.forEach(function(item){
			    	 $("#categories").append(($("<option>")).attr("value",item.id).text(item.type));
			     });
	             
		      }
   };
    
    /*页面初始化*/
    $(function(){
    	
    	var mainPage = new MerchantFoodManager($("#category-list"));
        mainPage.findAllCategories();
        
        $("#addFoodBtn").on("click",function(){
            
        });
    });
</script>
</body>
</html>